<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>精品展示 · 横向滚动</title>
    <style>

        * { margin: 0; padding: 0; box-sizing: border-box; }


        #bg {
            width: 940px;
            height: 158px;
            margin: 0 auto;                    /* 水平居中 */
            background: url('jp.png') no-repeat center/cover;
        }

        #flist {
            padding-top: 30px;
            width: 920px;
            height: 128px;                     /* 比 bg 小 30px */
            margin: 0 auto;                    /* 水平居中 */
            overflow: hidden;                  /* 超出部分隐藏 */
        }

        /* ===== 表格 & 图片 ===== */
        table { border-collapse: collapse; }


        #outerTable td {
            white-space: nowrap;
        }


        #Pic1 img {
            width: 96px;
            height: 96px;
            margin-right: 6px;
            border-radius: 4px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<!-- 背景相框 -->
<div id="bg">
    <!-- 连续图片滚动区 -->
    <div id="flist">
        <table id="outerTable">
            <tr>
                <!-- Pic1：原始 9 张图 -->
                <td id="Pic1">
                    <table>
                        <tr>
                            <td><img src="1.jpg"  alt="1"></td>
                            <td><img src="2.jpg"  alt="2"></td>
                            <td><img src="3.jpg"  alt="3"></td>
                            <td><img src="4.jpg"  alt="4"></td>
                            <td><img src="5.jpg"  alt="5"></td>
                            <td><img src="6.jpg"  alt="6"></td>
                            <td><img src="7.jpg"  alt="7"></td>
                        </tr>
                    </table>
                </td>
                <td id="Pic2"></td>
            </tr>
        </table>
    </div><!-- /flist -->
</div><!-- /bg -->

<script>
    document.getElementById('Pic2').innerHTML = document.getElementById('Pic1').innerHTML;

    const flist = document.getElementById('flist');
    const pic1  = document.getElementById('Pic1');

    function scrToLeft() {
        // 当滚动量 >= Pic1 可滚动宽度时复位
        if (flist.scrollLeft >= pic1.offsetWidth) {
            flist.scrollLeft = 0;
        } else {
            flist.scrollLeft += 1; // 每次滚动 1px
        }
    }

    let timer1 = setInterval(scrToLeft, 40);

    flist.addEventListener('mouseenter', () => clearInterval(timer1));

    flist.addEventListener('mouseleave', () => {
        timer1 = setInterval(scrToLeft, 40);
    });
</script>
</body>
</html>